<template>
    <el-dropdown @command="handleCommand" trigger="click">
        <span class="el-dropdown-link">
            <div style="display: flex;">
                <div class="content">
                    <el-avatar :size="50" :src="circleUrl" />
                    <p>张三李四</p>
                </div>
                <!-- <div class="rightDown">
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </div> -->
            </div>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item command="me">个人中心</el-dropdown-item>
                <el-dropdown-item command="logOut" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>

</template>

<script setup>
import { ref } from 'vue';
const circleUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
import { ElMessage } from 'element-plus'
import useUserStore from '@/store/user'
import { useRouter } from 'vue-router';
const router = useRouter();

function handleCommand(val) {
    if (val == 'logOut') {
        useUserStore().logOut().then((res) => {
            // ElMessage.error('退出登录成功！')
            router.push('/login');
        })
    }
}
</script>

<style scoped>
.content {
    padding: 10px;
    text-align: center;
    cursor: pointer;
}

.content p {
    line-height: 24px;
}

.rightDown {
    display: flex;
    align-items: center;
    /* 垂直居中 */
}
</style>